<html>

<head>
    <style>
        th,
        td {
            padding: 5px;
            text-align: left;
        }

        h2 {
            padding: 20px;
        }

        td div {
            padding-top: 5px;
            padding-left: 10px;
        }

        .content {
            background-color: #ffffff;
            justify-content: center;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .state-success-bk {
            background-color: #4caf50 !important;
        }

        .state-failure-bk {
            background-color: #FFCDD2 !important;
        }

        .state-cancelled-bk {
            background-color: #9e9e9e !important;
        }

        .state-timeout-bk {
            background-color: #ff9800 !important;
        }
    </style>
</head>

<body>
    <div class="content">
        
        {% if job.status == 'SUCCESS' %}
        <h2 class="state-success-bk">flow.ci report: {{ job.flowName }} #{{ job.number }}</h2>
        {% elif job.status == 'FAILURE' %}
        <h2 class="state-failure-bk">flow.ci report: {{ job.flowName }} #{{ job.number }}</h2>
        {% elif job.status == 'CANCELLED' %}
        <h2 class="state-cancelled-bk">flow.ci report: {{ job.flowName }} #{{ job.number }}</h2>
        {% elif job.status == 'TIMEOUT' %}
        <h2 class="state-timeout-bk">flow.ci report: {{ job.flowName }} #{{ job.number }}</h2>
        {% endif %}

        <table>
            <tbody>
                <tr>
                    <td>State:</td>
                    <td>{{ job.status }}</td>
                </tr>
                <tr>
                    <td>Trigger:</td>
                    <td>{{ job.trigger }}</td>
                </tr>
                <tr>
                    <td>Triggered By:</td>
                    <td>{{ job.triggerBy }}</td>
                </tr>
                <tr>
                    <td>Start At:</td>
                    <td>{{ job.startAt }}</td>
                </tr>
                <tr>
                    <td>Finish At:</td>
                    <td>{{ job.finishAt }}</td>
                </tr>
                <tr>
                    <td>Duration:</td>
                    <td>{{ job.duration }} (ms)</td>
                </tr>

                <!-- Git Commit Info -->
                {% if job.trigger in ["PUSH", "TAG"] %}
                <tr>
                    <td colspan="2">
                        <h5>Git Info:</h5>
                        <div>
                            Branch: {{ job.gitCommit.branch }}
                        </div>
                        <div>
                            Commit ID: 
                            <a href="{{ job.gitCommit.url }}" target="_blank">{{ job.gitCommit.id }}</a>
                        </div>
                        <div>
                            Commit Message: {{ job.gitCommit.message }}
                        </div>
                    </td>
                </tr>
                {% endif %}

                <!-- Git PR Info -->
                {% if job.trigger in ["PR_OPENED", "PR_MERGED"] %}
                <tr>
                    <td colspan="2">
                        <h5>Git Info:</h5>
                        <div>
                            Title: 
                            <a href="{{ job.gitPr.url }}" target="_blank">{{ job.gitPr.title }}</a>
                        </div>
                        <div>
                            Message: {{ job.gitPr.message }}
                        </div>
                        <div>
                            Number: {{ job.gitPr.number }}
                        </div>
                        <div>
                            Head Repo: {{ job.gitPr.head.name }}, {{ job.gitPr.head.branch }} 
                        </div>
                        <div>
                            Base Repo: {{ job.gitPr.base.name }}, {{ job.gitPr.base.branch }} 
                        </div>
                    </td>
                </tr>
                {% endif %}

                <!-- Steps -->
                <tr>
                    <td colspan="2">
                        <h5>Steps:</h5>
                        {% for step in job.steps %}
                        <div>
                            {{ step.name }} : {{ step.status }}
                        </div>
                        {% endfor %}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>